import React from 'react';
import { SearchBar, Button, NoticeBar, Icon, Avatar, List, Checkbox, Toast, Tools } from 'weaver-mobile';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import If, { Then, Else } from '../../../common/if';
import Loading from '../../../common/loading';
import './index.less';

const getLabel = Tools.getLabel; 
const CheckboxItem = Checkbox.CheckboxItem;

@inject('setGroupPersonStore')
@withRouter
@observer
export default class SetGroutNoWrite extends React.Component {
  constructor(props) {
    super(props);
    const { pkId, conversationId } = this.props.location.query;

    this.store = props.setGroupPersonStore;
    this.state = {
      filterVal : '',
      showDetail : false
    }
    this.store.init(pkId, conversationId);
  }

  onSubmit = () => {
    const { onSubmit } = this.store;

    onSubmit().then(res => {
      Toast.success(getLabel(523266, '设置成功'), 0.5);

      setTimeout(() => {
        this.props.history.goBack();
      }, 500);
    })
  }
  
  render() {
    const {
      goupPerson,
      loading,
      noWritePerson,
      onCheck,
      btnLoading
    } = this.store;
    const { filterVal } = this.state;

    return (
      <div className='wea-edc-group-nowrite'>
        <div className='header'>
          <SearchBar 
            placeholder={getLabel(523267, '请输入搜索的人员')}
            onSubmit={val => this.setState({ filterVal: val })}
          />
          <NoticeBar
            icon={<Icon type='anomaly' size='xs' />}
          >
            {getLabel(523268, '选择群组中不用填写的人员')}
          </NoticeBar>
        </div>
        <div className='person-list'>
          <If condition={loading} >
            <Then>
              <Loading loading={true} className='list-loading' />
            </Then>
            <Else>
              <List>
                {
                  goupPerson.filter(person => !!~person.lastname.indexOf(filterVal)).map(person => (
                    <CheckboxItem 
                      key={person.id} 
                      onChange={() => onCheck(person)} 
                      checked={!!~noWritePerson.indexOf(person.id)} 
                    >
                      <Avatar userId={person.id} />
                      <div className='person-info'>
                        <span className='person-name'>{person.lastname || person.name}</span>
                        <span className='person-department'>{person.departmentName}</span>
                      </div>
                    </CheckboxItem>
                  ))
                }
              </List>
            </Else>
          </If>
        </div>
        <div className='footer'>
          <Button type='primary' onClick={this.onSubmit} loading={btnLoading} >{getLabel(523269, '确定')}</Button>
        </div>
      </div>
    )
  }
}